<template>
    <div>
<div id="slider" class="mui-slider ">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class='["mui-control-item" ,item.id==0?"mui-active":""]' v-for="item in list" :key="item.id" @click="getimglist(item.id)">
							{{item.title}}
						</a>
				
					</div>
				</div>
			</div>
            <!-- 图片区域 -->
    <ul class='photolist-ul'>
         <router-link tag='li'  v-for="item in img" :key='item.id' class='Imagelist' :to='"/home/navList/"+item.id'>
         <img v-lazy="item.img_url">
         <div class='infor'>
         <h4>{{item.title}}</h4>
         <p>{{item.zhaiyao}}</p>
         </div>
        </router-link>
    </ul>

    </div>
</template>
<script>
 import mui from '../../lib/mui/js/mui.min.js'
export default {
    data() {
        return {
            list:[],
            img:[]
        }
    },
mounted() {
    mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
},
created() {
    this.getnavList()
    this.getimglist(0)
},
    methods: {
        getnavList(){
            this.$http.get('api/getimgcategory').then(roulist=>{
                if(roulist.body.status==0){
                           this.list=roulist.body.message
                           this.list.unshift({title:'全部', id:0} )
                }
                
                
            })
        },
        getimglist(id){
            this.$http.get('api/getimages/'+id).then(imglist=>{
                this.img=imglist.body.message
                
            })
        },
       
    },
}
</script>

<style lang="scss" scoped>
 *{
		touch-action: pan-y;
        padding:0;
        margin:0
	}
img[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}
.mui-bar-tab .mui-tab-item-1.mui-active {
    color: #007aff;
}
.mui-bar-tab .mui-tab-item-1 {
    display: table-cell;
    overflow: hidden;
    width: 1%;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #929292;
}
.mui-bar-tab .mui-tab-item-1 .mui-icon {
    top: 3px;
    width: 24px;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item-1 .mui-icon~.mui-tab-label {
    font-size: 11px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
     .photolist-ul{

         li{
             list-style: none;
             position: relative;
             img{
                 width: 100%;
             }
             .infor{
                 color: white;
                 text-align: left;
                 position: absolute;
                 bottom: 0;
                 background-color:rgba(0,0,0,0.5) ;
                 padding: 10px;
                 box-sizing: border-box;
               p{
                   font-size:12px
               }
             }
         }
     }



 
 
</style>

</style>